<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.car{
			width: 200px;
			height: 100px;
			background-color: #a52a2a;
			position: relative;
			animation: carani 5s;
		}
		@keyframes carani{
			0%{
				left: 0;
			}
			50%{
				left: 600px;
			}
			100%{
				left: 0;
			}
		}
		.box1{
			width: 200px;
			height: 60px;
			position: relative;
		}
		@keyframes box2ani{
			0%{
				left: 0;
			}
			50%{
				left: 600px;
				transform: rotate(3600deg);
			}
			100%{
				left: 0;
			}
		}
		@keyframes box3ani{
			0%{
				left: 0;
			}
			50%{
				left: 600px;
				transform: rotate(3600deg);
			}
			100%{
				left: 0;
			}
		}
		.box2{
			width: 60px;
			height:60px;
			border-radius: 30px;
			background-color: black;
			position: absolute;
			float: left;
			color: white;
			text-align: center;
			font-size: 40px;
			animation: box2ani 5s;
		}
		.box3{
			width: 60px;
			height:60px;
			border-radius: 30px;
			background-color: black;
			position: absolute;
			float: left;
			color: white;
			margin-left: 140px;
			text-align: center;
			font-size: 40px;
			animation: box3ani 5s;
		}
	</style>
</head>
<body>
	<div class="car"></div>
	<div class="box1">
		<div class="box2">+</div>
		<div class="box3">+</div>
	</div>
</body>
</html>